<%@page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
<c:set var="menu" value="group" scope="request" />

<html>
<head>
<title>Groups</title>
<script type="text/javascript">
   $(document).ready(function () {
      var source = {
         datatype: "json",
         datafields: [
			{ name: 'id' },          
            { name: 'name' },
            { name: 'description' },
            { name: 'createdDate' },
            { name: 'createdBy' }
         ],
         id: 'id',
         url: "<c:url value='/admin/group/search' />",
         async: false
      };

      var dataAdapter = new $.jqx.dataAdapter(source);
      var renderer = function (row, column, value, html) {
         return '<a href="group/' + dataAdapter.records[row].id + '">' + html + '</a>';
      };

      $("#groupGrid").jqxGrid({
         width: 870,
         source: dataAdapter,
         theme: getTheme(),
         columnsresize: true,
         pageable: true,
         autoheight: true,
         sortable: true,
         altrows: true,
         columns: [
            { text: 'Name', datafield: 'name', width: 180, cellsrenderer: renderer },
            { text: 'Description', datafield: 'description', width: 390 },
            { text: 'Created Date', datafield: 'createdDate', width: 160 },
            { text: 'Created By', datafield: 'createdBy', width: 140 }
         ]
      });
   });

   function openDiaglog(title) {
      $("#groupDialog").dialog({
         title: title,
         resizable: false,
         draggable: false,
         modal: true,
         width: 300,
         buttons: {
            "Save": function() {
               saveGroup();
   			},
   			Cancel: function() {
   				$(this).dialog("close");
   			}
         }
      });
   }

   function closeDiaglog() {
      $('#groupDialog').dialog('close');
   }
   
   function openDeleteDiaglog() {
      $("#dialog-confirm").dialog({
         resizable: false,
         draggable: false,
         modal: true,
         width: 300,
         buttons: {
            "Delete all items": function() {
               deleteGroup();
   			},
   			Cancel: function() {
   				$(this).dialog("close");
   			}
         }
      });
   }

   function addGroup() {
      $("#groupDialog").load("<c:url value='/ajax/admin/group' />");
      openDiaglog("Add Group");
   }

   function editGroup() {
      var selectedIndex = $("#groupGrid").jqxGrid('getselectedrowindex');
      if(selectedIndex < 0) {
         alert("Please select a row.");
         return;
      }

      var id = $("#groupGrid").jqxGrid('getrowid', selectedIndex);
      $("#groupDialog").load("<c:url value='/ajax/admin/group' />?id=" + id);
      openDiaglog("Edit Group");
   }

   function saveGroup() {
      $.ajax({
         url : "<c:url value='/ajax/admin/group/save' />",
         type : "POST",
         data: $('#groupForm').serialize(),
         dataType : "html",
         success : function(data) {
            if($(data).first().attr("id") == "error") {
        	   $("#groupDialog").html(data);
            } else {
               closeDiaglog();
               $("#groupGrid").jqxGrid("source").dataBind();
            }
         }
      });
   }

   function clearForm() {}

   function deleteGroup() {
      $('#dialog-confirm').dialog('close');
      
      var selectedIndex = $("#groupGrid").jqxGrid('getselectedrowindex');
      if(selectedIndex < 0) {
         alert("Please select a row.");
         return;
      }

      var id = $("#groupGrid").jqxGrid('getrowid', selectedIndex);
      $.ajax({
         url : "<c:url value='/ajax/admin/group/delete' />",
         type : "POST",
         data : { id: id },
         dataType : "html",
         success : function(data) {
            if(data == "error") {
        	   alert('error!!');
        	   return;
            }

            $("#groupGrid").jqxGrid("source").dataBind();
         },
         error : function(){
            alert('-1');
         }
      });
   }
</script>
</head>

<body>
   <div class="cubeTitleWrapper">
      <span class="cube_title">Groups</span>
   </div>

   <div class="cube">
      <div>
         <div class="contentwrapper">
            <div class="contentcolumn">
               <div class="innertube">
                  <h2 class="userDefinedBg curved">Groups</h2>
                  <div class="contentBlock">
                     <div id='userWidget'><div id="groupGrid">No results found</div></div>
                  </div>
                  <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>
               </div>
            </div>
         </div>

         <div class="rightcolumn">
            <div class="innertube">
               <h2 class="userDefinedBg"><span class="right_end"><span class="start">Tools</span></span></h2>
               <div class="contentBlock">
                  <ul class="toolbox userDefinedColor">
                     <li class="userDefinedBg"><a class="add_link add-sow" href="javascript:addGroup()">Add New Group</a></li>
                     <li class="userDefinedBg"><a class="add_link edit" href="javascript:editGroup()">Edit Selected Group</a></li>
                     <li class="delete"><a class="add_link delete" href="javascript:openDeleteDiaglog()">Delete Selected Group(s)</a></li>
                  </ul>
               </div>
               <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>
            </div>
         </div>
      </div>
   </div>
   
   <div id="groupDialog" title="Add Group" style="display: none;"></div>
   <div id="dialog-confirm" title="Delete selected group(s)?" style="display: none;">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These groups will be permanently deleted and cannot be recovered. Are you sure?</p>
   </div>
</body>
</html>